<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :close-on-click-modal=false
    :close-on-press-escape=false
    :show-close=false
    width="70%">
    <el-form
      label-width="150px"
      :model="deptSearchForm"
      ref="deptSearchForm"
    >
      <el-row>
        <el-col :span="16">
          <el-form-item class="form-item" label="部门名称:" prop="searchValue">
            <el-input placeholder="输入关键字进行过滤" v-model="searchValue"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="2">
          <el-form-item class="form-item" label="只显示本级部门:" prop="localRegion">
            <el-switch v-model="localRegion" active-color="#13ce66" inactive-color="#DCDFE6"></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-row>
        <el-col :span="16">
          <div style="height:300px;overflow:auto;margin-left: 30px">
            <el-tree class="filter-tree"
                     :data="deptData"
                     v-loading=loading
                     :load="getDeptChildren"
                     lazy
                     node-key="id"
                     ref="deptTree"
                     accordion
                     highlight-current
                     :props="defaultProps"
                     @node-click="nodeClick" v-show="lazy">
            </el-tree>
            <el-tree class="filter-tree"
                     v-loading=loading
                     :data="deptSynData"
                     node-key="id"
                     ref="deptSynTree"
                     :default-expand-all="true"
                     accordion
                     highlight-current
                     :props="defaultProps"
                     @node-click="nodeClick" v-show="!lazy">
            </el-tree>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="margin-left: 10px;">
           <h3>已选部门：</h3>
           <el-tag v-if="deptName">{{deptName}}</el-tag>
          </div>
        </el-col>
      </el-row>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel()">取 消</el-button>
      <el-button type="primary" @click="confirm()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {getDeptTree, getDeptXieTree} from "@/api/system";
  import {mapGetters} from "vuex";

  export default {
    name: "deptTree",
    created() {
      this.lazy = true;
      this.debouncedGetSearchResult = _.debounce(this.getSearchResult, 500)
    },
    data() {
      return {
        deptId: '',
        deptName: '',
        searchValue: '',//搜索文字
        deptData: [],//申报单位树数据
        deptSynData: [],
        lazy: true,
        localRegion: true,
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        loading: false,
        deptSearchForm:{},
      }
    },
    props: {
      //最小部门类型，小于此类型的子部门不会显示，type为null会显示
      miniType: {
        type: Number,
        default: null
      },
      title: {
        type: String,
        default: '部门选择'
      },
      showCheckbox: {
        type: Boolean,
        default: false
      },
      visible: {
        type: Boolean,
        default: false
      },
      province: {
        type: Boolean,
        default: true
      }
    },
    computed: mapGetters(["deptInfo"]),
    watch: {
      searchValue(newValue, oldValue) {
        if (newValue.length <= 1) {
          this.lazy = true;
        } else if (newValue) {
          this.lazy = false;
          this.loading = true;
          this.getSearchResult(newValue);
        }
      },
      localRegion(newValue, oldValue) {
        this.lazy = true;
        this.searchValue = "";
        this.loading = true;
        if (newValue) {
          let queryParams = {
            miniType: this.miniType,
            parentId: this.deptInfo.parentId
          };
          getDeptTree(queryParams).then(response => {
            this.loading = false;
            this.deptData = response.data.data;
          })
        } else if(this.province){
          let queryParams = {
            miniType: this.miniType,
            parentId: -2
          };
          getDeptTree(queryParams).then(response => {
            this.loading = false;
            this.deptData = response.data.data;
          })
        }else {
          let queryParams = {
            miniType: this.miniType,
            parentId: -1
          };
          getDeptTree(queryParams).then(response => {
            this.loading = false;
            this.deptData = response.data.data;
          })
        }
      }
    },
    methods: {
      // 获取申报单位树
      getSearchResult(value) {
        let param = {};
        param.name = value;
        if (this.localRegion) {
          param.areaCode = this.deptInfo.areaCode
        }
        getDeptXieTree(param).then(response => {
          this.loading = false;
          this.deptSynData = response.data.data;
        })
      },
      // 获取申报单位树
      getDeptChildren(node, resolve) {
        this.loading = true;
        let parentId;
        if(!this.province){
          parentId = -1;
        }
        if (this.localRegion && node == undefined) {
          parentId = this.deptInfo.parentId;
        } else if (!this.localRegion && node == undefined) {
          parentId = -2;
        } else if (this.localRegion && node.data.length == 0) {
          parentId = this.deptInfo.parentId;
        } else {
          parentId = node.data.id
        }

        let queryParams = {
          miniType: this.miniType,
          parentId: parentId
        };
        getDeptTree(queryParams).then(response => {
          this.loading = false;
          resolve(response.data.data)
        })
      },
      //申报单位树点击事件
      nodeClick(data) {
        this.deptId = data.id;
        this.deptName = data.name;
      },
      cancelDept() {
        this.visible = false;
      },
      cancel(){
        this.$emit('cancel',this.deptId, this.deptName)
      },
      confirm() {
        this.$emit('getSelectInfo',this.deptId, this.deptName)
      }
    }
  };
</script>

<style lang="scss">
  .el-tree > .el-tree-node {
    min-width: 100%;
    min-height: 100%;
    display: inline-block;
  }
</style>
